<template>
  <div style="display: inline-block">
    <v-snackbar :timeout="3000" v-model="snackbar" top multi-line>
      {{ $t('navbar.themeChange') }}
      <v-btn flat color="pink" @click.native="snackbar = false">{{$t('navbar.close')}}</v-btn>
    </v-snackbar>

    <v-menu bottom left>
      <v-btn icon slot="activator" dark>
        <v-icon>palette</v-icon>
      </v-btn>
      <v-list>
        <v-list-tile v-for="item in themes" :key="item.label" @click="handleSetTheme(item.theme)">
          <v-list-tile-title>{{ item.label }}</v-list-tile-title>
        </v-list-tile>
      </v-list>
    </v-menu>

  </div>
</template>

<script>
export default {
  name: 'VTheme',
  data: () => ({
    snackbar: false,
    themes: [
      {
        label: '天空蓝',
        theme: {
          primary: '#1976D2',
          secondary: '#424242',
          accent: '#82B1FF',
          error: '#FF5252',
          info: '#2196F3',
          success: '#4CAF50',
          warning: '#FFC107'
        }
      },
      {
        label: '水墨绿',
        theme: {
          primary: '#43A047',
          secondary: '#AED581',
          accent: '#4DB6AC',
          error: '#f44336',
          warning: '#ffeb3b',
          info: '#2196f3',
          success: '#81C784'
        }
      },
      {
        label: '清新绿',
        theme: {
          primary: '#26A69A',
          secondary: '#9CCC65',
          accent: '#DCE775',
          error: '#FF7043',
          warning: '#F9A825',
          info: '#64B5F6',
          success: '#66BB6A'
        }
      },
      {
        label: '橘子橙',
        theme: {
          primary: '#FF6D00',
          secondary: '#FFA726',
          accent: '#FFD600',
          error: '#FF7043',
          warning: '#FBC02D',
          info: '#42A5F5',
          success: '#81C784'
        }
      }
    ]
  }),
  methods: {
    handleSetTheme(theme) {
      this.$store.dispatch('setTheme', theme)
      this.$vuetify.theme = theme
      this.snackbar = true
    }
  },
  created() {
    this.$vuetify.theme = this.$store.getters.theme
  }
}
</script>
